<template>
	<div>
		<div>1/2订单详情</div>
		<div class="bdy" v-if="orderList.recruit">
			<div>姓名：{{orderList.student_name}}</div>
			<div v-for="(item,index) in orderList.home">
				<div v-if="item2.value == item.relation" v-for="(item2,index) in parents">联系方式：{{item.phone}}({{item2.relation}})</div>
			</div>
			<hr />
			<div v-for="(item,index) in semesterList" v-if="item.unid == orderList.recruit.semester_id">在读学期：{{item.semester_name}}</div>
			<div v-for="(item,index) in gader" v-if="item.value == orderList.recruit.grade">在校年级：{{item.level}}</div>
			<div class="row">
				<div>在读课程：{{lessionDes.lession_name}}</div>
				<div>上课教室：</div>
			</div>
			<div class="row">
				<div>所属校区：</div>
				<div>校区电话：</div>
			</div>
			<hr />
		</div>
		<div class="bdy">
			<div v-for="(item,index) in orderList.order">
				<div>订单编号：{{item.unid}}</div>
				<div class="row" v-for="(item2,index2) in item.order_pay" v-if="item2.pay_lession">
					<div>购买内容：{{item2.pay_lession.lession.lession_name}}</div>
					<div>数量：{{item2.pay_num}}</div>
					<div>金额：{{item2.pay_lession.price*item2.pay_num}}</div>
				</div>
				<hr />
			</div>
		</div>
		<div class="price">合计金额：</div>
		<div>2/2缴费详情</div>
		<div class="bdy" v-for="(item,index) in orderList.order">
			<div v-for="(item2,index2) in item.pay_fee">
				<div class="row">
					<div>订单编号：{{item2.order_id}}</div>
					<div>收款日期：{{item2.create_time}}</div>
				</div>
				<div class="row2">
					<div>缴费类型：</div>
					<div v-for="(item3,index3) in paymode" v-if="item2.pay_type == item3.value">缴费方式：{{item3.label}}</div>
					<div>交易编号：</div>
					<div>缴费金额：{{item2.pay_pirce}}</div>
					<div>未缴费用：</div>
				</div>
				<hr />
			</div>
		</div>
		<div class="bdy">
			<div class="btn">
				<el-button type="info" plain>打印</el-button>
				<el-button type="primary" @click="pay">缴费</el-button>
			</div>
		</div>
		<el-dialog title="新增学员缴费录入" :visible.sync="showPay" width="700px" append-to-body>
			<el-form label-width="90px" class="demo-ruleForm">
				<el-row>
					<el-col :span="12">
						<el-form-item label="缴费类型：">
						  <el-select v-model="formData.type" placeholder="请选择缴费类型">
						    <el-option label="定金" :value="1" />
							<el-option label="学费" :value="2" />
						  </el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="收款日期：">
						  <div class="block">
						      <el-date-picker style="width: 238px;"
						        type="daterange"
								format="yyyy-MM-dd"
								value-format="yyyy-MM-dd"
						        range-separator="至"
						        start-placeholder="开始日期"
						        end-placeholder="结束日期">
						      </el-date-picker>
						    </div>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="缴费方式：">
						  <el-select v-model="formData.pay_type" placeholder="请选择缴费方式">
						    <el-option v-for="(item,index) in paymode" :label="item.label" :value="item.value" />
						  </el-select>
						</el-form-item>
					</el-col>
					<el-col :span="16">
						<el-form-item>
						  <el-select v-model="formData.order_id" placeholder="录入缴费单号">
						    <el-option v-for="(item,index) in studentDes.order" :label="item.unid" :value="item.unid" />
						  </el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="缴费金额：">
						  <el-input v-model="formData.pay_pirce" placeholder="请输入缴费金额" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="收款人：">
						  <el-select v-model="formData.teacher_id" placeholder="请选择收款人">
						    <el-option v-if="item.nickname" v-for="(item,index) in teacherData" :label="item.nickname" :value="item.id" />
						  </el-select>
						</el-form-item>
					</el-col>
					<div class="btn">
						<el-button type="info" plain>打印</el-button>
						<el-button type="primary" @click="pay2">缴费</el-button>
					</div>
				</el-row>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import { selectStudentById,queryLessionById,queryTeacher,addPayFees } from '@/api/studentRecruit.js'
export default{
	data(){
		return{
			value:1,
			showPay:false, //缴费弹窗状态
			orderList:[],
			paymode:[
				{
					label:'现金',
					value:1
				},{
					label:'刷卡',
					value:2
				},{
					label:'微信',
					value:3
				},{
					label:'支付宝',
					value:4
				}
			],
			parents:[
				{
					relation:'爸爸',
					value:1
				},
				{
					relation:'妈妈',
					value:2
				},
				{
					relation:'爷爷',
					value:3
				},
				{
					relation:'奶奶',
					value:4
				},
			],
			gader:[
				{
					level:'一年级',
					value:1,
				},
				{
					level:'二年级',
					value:2,
				},
				{
					level:'三年级',
					value:3,
				},
				{
					level:'四年级',
					value:4,
				},
				{
					level:'五年级',
					value:5,
				},
				{
					level:'六年级',
					value:6,
				},
				{
					level:'初一',
					value:7,
				},
				{
					level:'初二',
					value:8,
				},
				{
					level:'初三',
					value:9,
				},
				{
					level:'高一',
					value:10,
				},
				{
					level:'高二',
					value:11,
				},
				{
					level:'高三',
					value:12,
				},
			],
			formData:{
				order_id:'',
				pay_num:'zzzzzzedccccsPay892',
				pay_type:'',
				pay_pirce:'',
				type:'',
				student_id:'',
				teacher_name:'',
				teacher_id:'',
				order_num:'zzzzzzedccccsOrder455',
			},
			teacherData:[],
			lessionDes:[],
		}
	},
	created() {
		this.queryOrder()
		console.log('学期',this.semesterList);
		this.queryTeachers()
	},
	methods:{
		//获取订单信息
		async queryOrder(){
			let resData = {
				unid:this.sturow.unid
			}
			let data = await selectStudentById(resData)
			if(data.code == 200){
				console.log('获取订单信息',data.data);
				this.orderList = data.data
			}
			this.queryLessionDes()
		},
		//缴费
		pay(){
			this.showPay = true
			console.log('studentDes',this.studentDes);
		},
		async pay2(){
			console.log('缴费');
			this.formData.student_id = this.sturow.unid
			// this.formData.teacher_id = this.sturow.recruit.teacher_id
			for (var i = 0; i < this.teacherData.length; i++) {
				if(this.formData.teacher_id == this.teacherData[i].id){
					this.formData.teacher_name = this.teacherData[i].nickname
				}
			}
			let data = await addPayFees(this.formData)
			if(data.code == 200){
				this.$message.success('缴费成功！')
				Object.keys(this.formData).forEach(key => {
					this.formData[key] = ''
				})
			}else{
				this.$message.error('缴费失败！')
			}
			// console.log('sturow',this.sturow);
		},
		//获取课程详细详细
		async queryLessionDes(){
			if(this.sturow.recruit){
				let resData = {
					unid:this.sturow.recruit.course_id
				}
				let data = await queryLessionById(resData)
				if(data.code == 200){
					this.lessionDes = data.data
					console.log('获取课程详细详细',data.data);
				}
			}
		},
		// 获取所有教师
		async queryTeachers() {
		    let queryData = {}
		    let resData = await queryTeacher(queryData)
		    console.log('获取教师', resData)
		    if (resData.code == 200) {
		        this.teacherData = resData.data
				console.log('教师列表',this.teacherData);
		    }
		},
	},
	props:{
		sturow:{
			type:Object,
			default:null,
		},
		semesterList:{
			type:Array,
			default:[],
		},
		lessionList:{
			type:Array,
			default:[],
		},
		studentDes:{
			type:Object,
			default:null,
		}
	}
}
</script>

<style lang="scss">
	.bdy{
		margin: 0 50px 0 50px;
		div{
			margin: 10px 0 10px 0;
		}
		.row{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			
			div{
				margin: 0;
			}
			
		}
		.row2{
			margin: 0;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			
			div{
				width: 30%;
				margin-top: 0;
			}
		}
		.btn{
			display: flex;
			flex-direction: row;
			justify-content: center;
			button{
				border-radius: 25px;
			}
		}
	}
	.price{
		font-size: 16px;
	}
</style>
